<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="css/api.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <style>
        header{ background-color: #ff5d5f; }
        header ul li { height: 35px; line-height:35px; text-align: center; display: none; color: #fff; position: relative;font-size: 16px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #fff; border-top:1px solid #ccc;}
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #ff5d5f; }
        #footer ul li:nth-child(1){ background-image: url(./image/footer_icon_011.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/footer_icon_012.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/footer_icon_013.png); }
        #footer ul li:nth-child(4){ background-image: url(./image/footer_icon_014.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/footer_icon_01.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/footer_icon_02.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/footer_icon_03.png); }
        #footer ul li:nth-child(4).active{ background-image: url(./image/footer_icon_04.png); }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="border-b active" >首页</li>
            <!--<li class="border-b" >去乐园</li>-->
            <li class="border-b" style="position: relative;">去乐园 <span id="searchBtn" onclick="search_qly();" style="float:right;margin-right:15px;width:16px;display:block;font-size: 14px;position:absolute;right:0;top:4px;"><img src="image/app_search_icon.png" style="width:100%" alt="" /></span></li>
            <li class="border-b" >乐享卡</li>
            <li class="border-b" style="position: relative;">我的<span id="searchBtn" onclick="setting_qly();" style="float:right;margin-right:15px;width:16px;display:block;font-size: 14px;position:absolute;right:0;top:3px;"><img src="image/app_setting_icon.png" style="width:100%" alt="" /></span></li>
        </ul>
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" id='tab_frontpage' class="flex-con active" >首页</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" id='tab_vender' class="flex-con" >去乐园</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" id='tab_sharecard'  class="flex-con" >乐享卡</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" id='tab_my' class="flex-con" >我的</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/qly_comm.js"></script>
<script type="text/javascript">
	var cur_tab_name = '首页';
	var talkingDataV = null;
    apiready = function () {
    	talkingDataV = api.require('talkingData');
//  	monitoringetwork();//监听网络事件
        $api.fixStatusBar( $api.dom('header') );
        api.setStatusBarStyle({
            style: 'light',
            color: '#ff5d5f'
        });
        
        funIniGroup();//加载frame页面
        exitApp();//在首页退出   安卓
        
        
        api.addEventListener({
		    name:'viewappear'
		}, function(ret, err){        
			  if(QlyApi.getTalkingdata()){
				QlyApi.getTalkingdata().onPageStart({pageName:cur_tab_name});
			}
		});
		       
       api.addEventListener({
		    name:'viewdisappear'
		}, function(ret, err){        
		   if(QlyApi.getTalkingdata()){
				QlyApi.getTalkingdata().onPageEnd({pageName:cur_tab_name});
			}
		});
        
        
        
    }
    function exitApp(){
        api.addEventListener({
            name:'keyback'
        },function(ret,err){
            api.toast({
                msg: '再按一次退出',
                duration: 2000,
                location: 'middle'
            });
            api.addEventListener({
                name:'keyback'
            },function(ret,err){
                api.closeWidget({silent:true});
            });
            setTimeout(function(){
                exitApp();
            },3000)
        });
    }
    
	function monitoringetwork(){
		api.addEventListener({
            name:'offline'
        },function(ret,err){
            api.toast({
                msg: "网络中断啦",
                duration: 1500,
                location: 'top'
            });
        });
        api.addEventListener({
            name:'online'
        },function(ret,err){
            var connectionType = ret.connectionType;
            api.toast({
                msg: "网络恢复正常，现在是"+connectionType+"网络",
                duration: 1500,
                location: 'top'
            });
        });
	}
	var SW_INDEX = 0 ; 
	
    function funIniGroup(){
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
            
//      for (var i = 0,len = eHeaderLis.length; i < len; i++) {
//          frames.push( { 
//              name: 'frame'+i, 
//              url: './html/frame'+i+'.html', 
//              bgColor : 'rgba(0,0,0,.2)',
//              bounces:true
//          } )
//      }
	 		frames.push( { 
                name: 'frontpage', 
                url: './html/frontpage.html', 
                bgColor : 'rgba(243,243,243,1)',
                pageParam:{window_title:'首页'},
                bounces:true
            } );
			frames.push( { 
                name: 'vender', 
                url: './html/vender.html', 
                bgColor : 'rgba(243,243,243,1)',
                pageParam:{window_title:'去乐园'},
                bounces:true
            } );
			frames.push( { 
                name: 'sharecard', 
                url: './html/sharecard.html', 
                bgColor : 'rgba(243,243,243,1)',
                pageParam:{window_title:'乐享卡'},
                bounces:true
            } );
			frames.push( { 
                name: 'my', 
                url: './html/my.html', 
                bgColor : 'rgba(243,243,243,1)',
                pageParam:{window_title:'我的'},
                bounces:true
            } );

        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0, 
                y: $api.dom('header').offsetHeight, 
                w: api.winWidth, 
                h: $api.dom('#main').offsetHeight
            },
            index: SW_INDEX,
            frames: frames
        }, function (ret, err) {
			if(talkingDataV){
				
				cur_tab_name = $api.html($api.byId('tab_'+ret.name));
				talkingDataV.onPageStart({pageName:cur_tab_name});
			}
			
        });
    }
	

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#footer li.active') ){
        	return;
        }else{
	        if(talkingDataV){
	        		 	talkingDataV.onPageEnd({pageName:cur_tab_name});
	        }
       
        }
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li');
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                SW_INDEX = i;
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[SW_INDEX], 'active');
        $api.addCls( eHeaderLis[SW_INDEX], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: SW_INDEX
        });
    }
    function search_qly(){
       	var jsfun = 'searchcc();';
		api.execScript({
		    frameName: 'vender',
		    script: jsfun
		});
    }
    function setting_qly(){
       	var settingfun = 'settingfun();';
		api.execScript({
		    frameName: 'my',
		    script: settingfun
		});
    }
    
    function reload_frame(){
    		api.closeFrameGroup({
		    name: 'group'
		});
    		 funIniGroup();
	}
  
    
</script>